<template>
  <div v-if="displayFlag.inputFlag || displayFlag.outputFlag">
    <h3>{{ apiMenuTitle.paramFieldDesc.children.input }}</h3>
    <el-collapse v-model="inputDisplay" v-if="displayFlag.inputFlag">
      <div v-if="displayFlag.input.inputHeader">
        <el-collapse-item title="入参请求头参数说明" name="inputHeader">
          <param-desc-one :write-flag="writeFlag" v-if="displayFlag.input.inputHeader"
                          :param-vo="descVo.inputHeader"/>
        </el-collapse-item>
      </div>
      <div v-if="displayFlag.input.inputPath">
        <el-collapse-item title="入参路径参数说明" name="inputPath">
          <param-desc-one :write-flag="writeFlag" v-if="displayFlag.input.inputPath" :param-vo="descVo.inputPath"/>
        </el-collapse-item>
      </div>
      <div v-if="displayFlag.input.inputQuery">
        <el-collapse-item title="入参查询参数说明" name="inputQuery">
          <param-desc-one :write-flag="writeFlag" v-if="displayFlag.input.inputQuery" :param-vo="descVo.inputQuery"/>
        </el-collapse-item>
      </div>
      <div v-if="displayFlag.input.inputBody">
        <el-collapse-item title="入参体参数说明" name="inputBody">
          <div v-for="item in descVo.inputBody">
            <param-desc-one :write-flag="writeFlag" v-if="disableBodyFlag(item, 0)" :param-vo="item"/>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
    <span v-else>无数据</span>

    <h3>{{ apiMenuTitle.paramFieldDesc.children.output }}</h3>
    <el-collapse v-model="outputDisplay" v-if="displayFlag.outputFlag">
      <div v-if="displayFlag.output.outputHeader">
        <el-collapse-item title="返回请求头参数说明" name="outputHeader">
          <param-desc-one :write-flag="writeFlag" :param-vo="descVo.outputHeader"
                          v-if="displayFlag.output.outputHeader"/>
        </el-collapse-item>
      </div>
      <div v-if="displayFlag.output.outputBody">
        <el-collapse-item title="返回体参数说明" name="outputBody">
          <div v-for="item in descVo.outputBody">
            <param-desc-one :write-flag="writeFlag" v-if="disableBodyFlag(item, 0)" :param-vo="item"/>
          </div>
        </el-collapse-item>
      </div>
    </el-collapse>
    <span v-else>无数据</span>
  </div>
  <span v-else>无数据</span>
</template>

<script>
import ParamDescOne from "@/components/document/ParamDescOne";
import ApiDocConstants from "@/utils/api-utils/ApiDocConstants";

export default {
  name: "ParamDesc",
  components: {ParamDescOne},
  props: {
    descVo: {
      type: Object,
      required: true
    },
    writeFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      displayFlag: ApiDocConstants.getDisplayFlag(),
      apiMenuTitle: ApiDocConstants.apiMenuTitle,
      inputBodyFlag: true,
      outputBodyFlag: true,
      inputDisplay: ["inputHeader", "inputPath", "inputQuery", "inputBody"],
      outputDisplay: ["outputHeader", "outputBody"]
    }
  },
  methods: {
    disableFlag(paramOne) {
      return paramOne && paramOne.fields && paramOne.fields.length > 0;
    },
    disableBodyFlag(paramOne, type) {
      let flag = this.disableFlag(paramOne);
      if (type === 0) {
        this.inputBodyFlag &= flag;
      } else {
        this.outputBodyFlag &= flag;
      }
      return flag;
    },
    setDisplay(param, field) {
      let flag = this.disableFlag(param);
      this.displayFlag.input[field] = flag;
      let index = this.inputDisplay.indexOf(field);
      if (flag && index === -1) {
        this.inputDisplay.unshift(field);
      } else if (!flag && index !== -1) {
        this.inputDisplay.splice(index, 1);
      }
    },
    init(data) {
      this.displayFlag.output.outputHeader = this.disableFlag(data.outputHeader);
      let index = this.outputDisplay.indexOf("outputHeader");
      if (this.displayFlag.output.outputHeader && index === -1) {
        this.outputDisplay.unshift("outputHeader");
      } else if (!this.displayFlag.output.outputHeader && index !== -1) {
        this.outputDisplay.splice(index, 1);
      }

      this.setDisplay(data.inputHeader, "inputHeader");
      this.setDisplay(data.inputPath, "inputPath");
      this.setDisplay(data.inputQuery, "inputQuery");

      if (data.inputBody) {
        let inputFlag = false;
        for (const param of data.inputBody) {
          if (this.disableFlag(param)) {
            this.displayFlag.input.inputBody = true;
            inputFlag = true;
            index = this.inputDisplay.indexOf("inputBody");
            if (index === -1) {
              this.inputDisplay.unshift("inputBody");
            }
            break;
          }
        }
        if (!inputFlag) {
          index = this.inputDisplay.indexOf("inputBody");
          if (index !== -1) {
            this.inputDisplay.splice(index, 1);
          }
        }
      } else {
        index = this.inputDisplay.indexOf("inputBody");
        if (index !== -1) {
          this.inputDisplay.splice(index, 1);
        }
      }

      if (data.outputBody) {
        let outputFlag = false;
        for (const param of data.outputBody) {
          if (this.disableFlag(param)) {
            this.displayFlag.output.outputBody = true;
            outputFlag = true;
            index = this.outputDisplay.indexOf("outputBody");
            if (index === -1) {
              this.outputDisplay.unshift("outputBody");
            }
            break;
          }
        }
        if (!outputFlag) {
          index = this.outputDisplay.indexOf("outputBody");
          if (index !== -1) {
            this.outputDisplay.splice(index, 1);
          }
        }
      } else {
        index = this.outputDisplay.indexOf("outputBody");
        if (index !== -1) {
          this.outputDisplay.splice(index, 1);
        }
      }

      this.displayFlag.inputFlag = this.inputDisplay.length > 0;
      this.displayFlag.outputFlag = this.outputDisplay.length > 0;
    }
  },
  watch: {
    descVo: function (newValue, oldValue) {
      this.init(newValue)
    }
  }
}
</script>

<style scoped>
.param-desc {
  background-color: #eefdf1;
}

span {
  text-align: left;
}
</style>